/* 子功能集合 */
<template>
  <div class="childfuncfield-config">
    <je-form-item label="按钮位置" name="buttonAlign">
      <je-select
        v-model:value="formState.buttonAlign"
        allow-clear
        :options="options.buttonAlignOptions"
      >
      </je-select>
    </je-form-item>
    <je-form-item
      label="启用数据面板"
      name="enableDataPanel 
"
    >
      <je-switch v-model:value="formState.enableDataPanel" mode="checkbox" />
      <span class="prompt">启用该项可以最大化展示数据，关闭后则不显示。</span>
    </je-form-item>
    <je-form-item label="可拖拽" name="drag">
      <je-switch v-model:value="formState.drag" mode="checkbox" />
      <span class="prompt">可以拖拽排序。</span>
    </je-form-item>

    <je-form-item label="可删除" name="remove">
      <je-switch v-model:value="formState.remove" mode="checkbox" />
      <span class="prompt">可以使用删除按钮。</span>
    </je-form-item>

    <je-form-item label="可批量删除" name="removes">
      <je-switch v-model:value="formState.removes" mode="checkbox" />
      <span class="prompt">可以使用批量删除按钮。</span>
    </je-form-item>

    <je-form-item label="可添加" name="add">
      <je-switch v-model:value="formState.add" mode="checkbox" />
      <span class="prompt">可以使用添加按钮。</span>
    </je-form-item>

    <je-form-item label="可批量添加" name="adds">
      <je-switch v-model:value="formState.adds" mode="checkbox" />
      <span class="prompt">可以使用批量添加按钮。</span>
    </je-form-item>

    <je-form-item label="批量添加类型" name="addsType">
      <je-select v-model:value="formState.addsType" :options="options.addsTypeOptions" allow-clear>
      </je-select>
    </je-form-item>

    <je-form-item label="批量添加配置" name="addsConfigInfo">
      <je-textarea v-model:value="formState.addsConfigInfo" :rows="4">
        <template #suffix>
          <i class="icon-button fas fa-list-ul" @click="onClickIcon"></i>
        </template>
      </je-textarea>
    </je-form-item>
    <ChildfuncfieldAddsConfiginfo
      v-if="visble"
      :visble="visble"
      :record-data="recordData"
      :addsconfig="formState.addsConfigInfo"
      :func-data="funcData"
      @changeModal="changeModal"
    />
  </div>
</template>
<script>
  import { defineComponent, reactive, watch, ref } from 'vue';
  import { Form, Input, Switch, Select, Modal } from '@jecloud/ui';
  import { decode, isNotEmpty, isEmpty } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';
  import ChildfuncfieldAddsConfiginfo from './modal/childfuncfield-adds-configinfo.vue';

  export default defineComponent({
    name: 'ChildfuncfieldConfig',
    components: {
      JeFormItem: Form.Item,
      JeTextarea: Input.TextArea,
      JeSwitch: Switch,
      JeSelect: Select,
      ChildfuncfieldAddsConfiginfo,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
      funcData: Object,
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const visble = ref(false);
      const formState = reactive({
        buttonAlign: config.buttonAlign || 'right', //按钮位置
        enableDataPanel: config.enableDataPanel || '',
        drag: config.drag || '', // 可拖拽
        remove: config.remove || '1', //可删除
        removes: config.removes || '', //可批量删除
        add: config.add || '1', //可添加
        adds: config.adds || '', //可批量添加
        addsType: config.addsType || 'grid', //批量添加类型
        addsConfigInfo: config.addsConfigInfo || '', //批量添加配置
        addsOtherConfig: config.addsOtherConfig || {}, //批量添加其他配置
      });
      const recordData = ref(config.addsOtherConfig);
      ///下拉框数据
      const options = reactive({
        buttonAlignOptions: [
          { label: '左侧', value: 'left' },
          { label: '右侧', value: 'right' },
        ],
        addsTypeOptions: [
          { label: '列表', value: 'grid' },
          /*  { label: '树形', value: 'tree' }, */
        ],
      });

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      watch(
        () => formState.addsConfigInfo,
        (newVal) => {
          if (isEmpty(newVal)) {
            formState.addsOtherConfig = {};
            recordData.value = {};
          }
        },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      // 点击icon
      const onClickIcon = () => {
        if (isNotEmpty(props.funcData.RESOURCEFIELD_CONFIGINFO)) {
          visble.value = true;
        } else {
          Modal.alert('请先填写配置信息！', 'warning');
        }
      };

      const changeModal = ({ type, addCfgs }) => {
        if (type == 'ok') {
          formState.addsConfigInfo = addCfgs.addsConfigInfo;
          formState.addsOtherConfig = addCfgs.addsOtherConfig;
          recordData.value = formState.addsOtherConfig;
        }
        visble.value = false;
      };

      return { formState, options, onClickIcon, visble, changeModal, recordData };
    },
  });
</script>
<style lang="less" scoped></style>
